import './SortBox.scss'
import { useEffect, useState } from 'react'
import { useEventEmitter, useMount } from 'ahooks'
import { CSS } from '@dnd-kit/utilities'
import { Input, Button, Result, Radio } from 'antd'

import { SortDescendingOutlined, SortAscendingOutlined, CloseCircleOutlined } from '@ant-design/icons'
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import { useSortable, arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable'



const SortableItem = ({ id, label, init, SortEvent }) => {

    // const [Value, setValue] = useState()
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id })
    const style = { transform: CSS.Transform.toString(transform), transition }
    const onClick = () => {
        // setValue('')
        SortEvent.emit({ id, init: '' })
    }
    const onChange = (e) => {
        // setValue(e.target.value)
        SortEvent.emit({ id, init: e.target.value })
    }

    return (
        <div className='SortableItem' ref={setNodeRef} style={style} {...attributes}>
            <div {...listeners}> {label} </div>
            <div>
                <Radio.Group value={init} onChange={onChange} buttonStyle="solid">
                    <Radio.Button value="asc" ><SortDescendingOutlined /></Radio.Button>
                    <Radio.Button value="desc" ><SortAscendingOutlined /></Radio.Button>
                </Radio.Group>
                <Button type='link' icon={<CloseCircleOutlined />} danger onClick={onClick}></Button>
            </div>
        </div>
    )
}



const SortBox = ({ data, Off }) => {
    const { DevEvent } = data
    const [sortData, setSortData] = useState(data.data)
    const sensors = useSensors(
        useSensor(PointerSensor),
        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
    )

    const handleDragEnd = (event) => {
        const { active, over } = event
        if (active.id !== over.id) {
            const oldIndex = sortData.findIndex(v => v.id === active.id)
            const newIndex = sortData.findIndex(v => v.id === over.id)
            const data = arrayMove(sortData, oldIndex, newIndex)
            setSortData(data)
        }
    }

    const SortEvent = useEventEmitter()
    SortEvent.useSubscription(val => {
        sortData.find(v => v.id === val.id).init = val.init
        setSortData([...sortData])
    })

    const onSortSearch = () => {
        const sort = sortData
            .filter(v => v.init)
            .reduce((acc, { value, init }, index) => {
                acc[value] = `${init}@${index}`
                return acc
            }, {})
        DevEvent.emit({ type: 'onSort', data: sort })
        Off()
    }


    return (
        <div className='SortBoxModel'>
            <div className='SortBox'>
                <DndContext handlesensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
                    <SortableContext items={sortData} strategy={verticalListSortingStrategy}>
                        {sortData.map(({ id, label, value, init }) => <SortableItem key={id} id={id} label={label} value={value} init={init} SortEvent={SortEvent} />)}
                    </SortableContext>
                </DndContext>
            </div>
            <div className='options'>
                <Button type='primary' size='large' onClick={onSortSearch}>排序查询</Button>
            </div>
        </div>
    );
};

export default SortBox;